<template>
    <view class="flex inner fit-width pb20">
        <image :src="item.image" class="li-img" />
        <view class="flex-1 ml20 fit-width">
            <view class="f32">
                <text class="li-txt">{{ item.name }}</text>
            </view>
            <view class="gray f26">商品介绍内容商品介绍</view>
            <view class="gray f26">库存：200 件</view>
            <view class="gray f26">进价：8.32 元</view>
        </view>
        <view class="align-self-end">
            <product-change :selected.sync="item.selected" @onChange="onChange"/>
        </view>
    </view>
</template>

<script>
    import productChange from './product-change.vue'
	export default {
        name:'productItem',
        components: {
            productChange
        },
        props:{
            name:{
                type: String,
                default: ''
            },
            item:{
                type: Object,
                default: ()=>{}
            }
        },
		methods: {
            onChange(){
                this.$emit('onChange',{name:this.name,item:this.item})
            }
		}
	}
</script>

<style lang="scss" scoped>
    .align-self-end{
        align-self: flex-end
    }
	.li-img{
		width: 120rpx;
		height: 120rpx;
		border-radius: 10rpx;
	}
	.li-txt{
	}
</style>
